				<div class="well">
                        <div>
                            <!-- <div class="nav-header">Communicate</div>		    				      
                            <p class="lead"> -->
                            <div id='media'>
                                <div id='over'>
                                    <video id="localVideo" autoplay="autoplay" class="ui-widget-content" style="position:absolute; height:120px; width:160px; margin-top: 10px; margin-right: 600px; z-index: 100; -webkit-transition-property: opacity;-webkit-transition-duration: 2s;"></video>  
                                </div>
                                <div id='resizable'>
                                    <video id="remoteVideo" onDblClick="toggleFullScreen();" width="640" height="480" autoplay="autoplay" style="margin-top: 10px;-webkit-transition-property: opacity; -webkit-transition-duration: 2s;"></video>  
                                </div>						    
                            </div>	                             		        
                        </div>
                    </div>
				<div class="modal hide fade" id="fileShareModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	                <div class="modal-header">
	                    <!--button type="button" class="close" data-dismiss="modal" aria-hidden="true">Ã</button-->
	                    <h3 id="call_message">Share File</h3>
	                </div>	 
	                <div class="modal-body">
					    <p>Choose file to share : </p>
					    <input type="file" id="fileToShare" name="files[]" multiple/> 
					     <!-- The global progress bar -->
					    <div id="progress" class="progress">
					        <div class="progress-bar progress-bar-success"></div>
					    </div>
					    <!-- The container for the uploaded files -->
					    <div id="files" class="files"></div>
					    <br>
					</div> 
	                <div class="modal-footer">
	                    <button class="btn reject-btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
	                    <button class="btn btn-primary accept-btn" data-dismiss="modal">Share</button>
	                </div>
            	</div>
        <audio id="ringing" loop src="resources/audio/ringing.wav" ></audio>
        <script type='text/javascript'>	           
            // Accept modal 
            $('#fileShareModal .accept-btn').click(function() {
            	var file = document.getElementById('fileToShare').files[0];
            	var reader = new FileReader();
            	reader.readAsDataURL(file);
            	reader.onload = onReadAsDataURL;
            	            	                        	
                $('#fileShareModal').modal('hide')
            });

            function onReadAsDataURL(event, text) {
                var data = {}; // data object to transmit over data channel
                var chunkLength = 1000;
                
                if (event) {
                	text = event.target.result; // on first invocation                 
                }

                if (text.length > chunkLength) {
                    data.message = text.slice(0, chunkLength); // getting chunk using predefined chunk length
                } else {
                    data.message = text;
                    data.last = true;
                }
                
                mobicentsWebRTCPhoneController.webRTCommCall.shareFileChunk(data);                

                var remainingDataURL = text.slice(data.message.length);
                if (remainingDataURL.length) setTimeout(function () {
                    onReadAsDataURL(null, remainingDataURL); // continue transmitting
                }, 500)
            }
            
            // Reject modal
            $('#fileShareModal .reject-btn').click(function() { 
            	$('#fileShareModal').modal('hide')
            });
            
            $(function() {
            	$("#remoteVideo").resizable({
            		maxHeight : 640,
            		maxWidth : 480,
            		minHeight : 220,
            		minWidth : 160
            	});
            });

            $(function() {
            	$("#localVideo").draggable({
            		containment : "#media",
            		scroll : false
            	});
            });

            function toggleFullScreen() {
            	var videoElement = document.getElementById("remoteVideo");
            	if (!document.mozFullScreen && !videoElement.webkitDisplayingFullscreen) {
            		/*
            		 * if (videoElement.mozRequestFullScreen) {
            		 * videoElement.mozRequestFullScreen(); } else {
            		 */
            		videoElement.webkitEnterFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            		/* } */
            	} else {
            		/*
            		 * if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
            		 * else {
            		 */
            		videoElement.webkitExitFullscreen();
            		/* } */
            	}
            }                     
</script>